<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <div style="border: 1px solid red;">
            爷爷组件 --- {{ title }} --- {{ msg }}
            <father :title="title" style="border: 1px solid blue;"></father>
        </div>
    </div>
</body>
<script>
    // import { computed } from 'vue'



    const son = {
        template: '<div style="border: 1px solid green;">孙子组件 --- {{ title }} --- {{message}} </div>',
        props: ['title'],
        inject: ['message', 'fn'],
        mounted() {
            console.log(this);

            this.fn('孙子组件传递的内容', '糖')
        },
    }


    const father = {
        template: `
        <div> 父组件 --- {{title}}  --- {{message}}
            <son :title='title'> </son> 
        </div>`,
        props: ['title'],
        inject: ['message'],
        components: {
            son
        }
    }


    const app = {
        data() {
            return {
                title: '传家宝',
                msg: '辣条'
            }
        },
        // 该写法无法获取到 this.msg 不推荐
        // provide: {
        //     message: this.msg
        // },
        provide() {
            console.log('provide');
            // 使用函数的形式，可以访问到 `this`
            return {
                // computed 计算属性函数
                message: Vue.computed(() => this.msg),
                fn: (val, tit) => {
                    // console.log('fn函数被调用了', val);
                    this.msg = tit
                }
            }
        },
        methods: {},
        components: {
            father
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>